React路由配置 菜品列表二维数组渲染 跳转详情传值
import React, { Component } from 'react';import {Link } from "react-router-dom";const axios = require('axios');class Home extends Component { constructor(props) { super(props); this.state = { list:[], domain:'http://a.itying.com/' }; } requestData=()=>{ var api=this.state.domain+'api/productlist'; axios.get(api) .then((response)=>{ console.log(response); this.setState({ list:response.data.result }) }) .catch(function (error) { console.log(error); }) } componentDidMount(){ this.requestData(); } render() { return (); }}export default Home;{ this.state.list.map((value,key)=>{ return() }) }{value.title}
{ value.list.map((v,k)=>{ return(
- ) }) }
{v.title}
{v.price}元
/*react解析html https://reactjs.org/docs/dom-elements.html*/import React, { Component } from 'react';import {Link } from "react-router-dom";const axios = require('axios');class Pcontent extends Component { constructor(props) { super(props); this.state = { list:[], domain:'http://a.itying.com/' }; } requestData(id){ var api=this.state.domain+'api/productcontent?id='+id; axios.get(api) .then((response)=>{ console.log(response); this.setState({ list:response.data.result[0] }) }) .catch(function (error) { console.log(error); }) } componentWillMount(){ //id console.log(this.props.match.params.id) let id=this.props.match.params.id; this.requestData(id); } render() { return (); }}export default Pcontent;返回{ this.state.list.title}
{
this.state.list.price}/份商品详情